{% extends "base.html" %}

{% block title %}关于 - 视频生成系统{% endblock %}

{% block head %}
<style>
    .feature-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    .version-badge {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        display: inline-block;
        margin: 1rem 0;
    }
    .tech-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .tech-tag {
        background-color: #e9ecef;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
        font-size: 0.9rem;
    }
    .stat-card {
        text-align: center;
        padding: 2rem;
    }
    .stat-number {
        font-size: 3rem;
        font-weight: 700;
        color: var(--primary-color);
    }
    .stat-label {
        color: #6c757d;
        font-size: 1rem;
        margin-top: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-primary text-white rounded p-5 mb-4">
            <h1 class="display-4">
                <i class="fas fa-info-circle me-3"></i>
                关于系统
            </h1>
            <p class="lead">
                基于AI技术的新一代教学视频生成平台，让知识传播更生动、更高效
            </p>
            <div class="version-badge">
                <i class="fas fa-code-branch me-2"></i>
                版本 v1.0.0
            </div>
        </div>
    </div>
</div>

<!-- 系统介绍 -->
<div class="row mb-5">
    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">
                    <i class="fas fa-star me-2 text-warning"></i>
                    系统简介
                </h3>
                <p class="card-text fs-5 lh-lg">
                    视频生成系统是一个基于AI技术的教学视频生成平台，专门为教育工作者、内容创作者和企业培训团队设计。
                    通过简单的Markdown文档输入，系统能够自动生成专业的教学视频，支持代码高亮、数学公式、主题定制等高级功能。
                </p>
                <p class="card-text fs-5 lh-lg">
                    无论您是创建在线课程、技术文档、学术讲座还是企业培训材料，我们的系统都能帮您快速制作出高质量的视频内容。
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 核心特性 -->
<div class="row mb-5">
    <div class="col-12">
        <h2 class="text-center mb-4">
            <i class="fas fa-gem me-2 text-primary"></i>
            核心特性
        </h2>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-magic feature-icon text-primary"></i>
                <h4 class="card-title">智能解析</h4>
                <p class="card-text">
                    自动识别Markdown中的标题、代码块、表格、数学公式等内容，智能生成视频脚本和场景描述。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-palette feature-icon text-success"></i>
                <h4 class="card-title">主题定制</h4>
                <p class="card-text">
                    提供多种预设主题（深色、浅色、学术、演示），支持自定义配色方案和品牌元素。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-code feature-icon text-info"></i>
                <h4 class="card-title">代码高亮</h4>
                <p class="card-text">
                    支持100+种编程语言的语法高亮，代码块动画展示，让技术内容更清晰易懂。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-square-root-alt feature-icon text-warning"></i>
                <h4 class="card-title">数学公式</h4>
                <p class="card-text">
                    完美支持LaTeX数学公式渲染，线性代数、微积分、统计学公式都能清晰展示。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-video feature-icon text-danger"></i>
                <h4 class="card-title">多质量选项</h4>
                <p class="card-text">
                    提供预览、标准、高质量、最高质量四种模式，满足不同场景的性能和质量需求。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <i class="fas fa-layer-group feature-icon text-secondary"></i>
                <h4 class="card-title">多场景组织</h4>
                <p class="card-text">
                    自动将长文档拆分为多个场景，支持场景间过渡动画，创造流畅的观看体验。
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 技术栈 -->
<div class="row mb-5">
    <div class="col-12">
        <h2 class="text-center mb-4">
            <i class="fas fa-cogs me-2 text-primary"></i>
            技术栈
        </h2>
    </div>

    <div class="col-lg-8 mx-auto">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-3">核心技术</h4>
                <div class="tech-stack mb-4">
                    <span class="tech-tag"><i class="fab fa-python me-1"></i> Python 3.9+</span>
                    <span class="tech-tag"><i class="fas fa-brain me-1"></i> AI/ML</span>
                    <span class="tech-tag"><i class="fab fa-html5 me-1"></i> HTML5</span>
                    <span class="tech-tag"><i class="fab fa-css3-alt me-1"></i> CSS3</span>
                    <span class="tech-tag"><i class="fab fa-js-square me-1"></i> JavaScript</span>
                    <span class="tech-tag"><i class="fas fa-server me-1"></i> Flask</span>
                    <span class="tech-tag"><i class="fas fa-project-diagram me-1"></i> Socket.IO</span>
                </div>

                <h4 class="card-title mb-3">框架和库</h4>
                <div class="tech-stack mb-4">
                    <span class="tech-tag">Bootstrap 5</span>
                    <span class="tech-tag">Font Awesome 6</span>
                    <span class="tech-tag">Video.js</span>
                    <span class="tech-tag">FFmpeg</span>
                    <span class="tech-tag">Pydub</span>
                    <span class="tech-tag">OpenCV</span>
                </div>

                <h4 class="card-title mb-3">开发和部署</h4>
                <div class="tech-stack">
                    <span class="tech-tag"><i class="fab fa-docker me-1"></i> Docker</span>
                    <span class="tech-tag"><i class="fab fa-github me-1"></i> GitHub</span>
                    <span class="tech-tag"><i class="fas fa-vial me-1"></i> Pytest</span>
                    <span class="tech-tag"><i class="fas fa-check-circle me-1"></i> CI/CD</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 统计数据 -->
<div class="row mb-5">
    <div class="col-12">
        <h2 class="text-center mb-4">
            <i class="fas fa-chart-line me-2 text-primary"></i>
            项目统计
        </h2>
    </div>

    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="stat-number">11</div>
            <div class="stat-label">核心模块</div>
        </div>
    </div>

    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="stat-number">131</div>
            <div class="stat-label">测试用例</div>
        </div>
    </div>

    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="stat-number">100%</div>
            <div class="stat-label">测试通过率</div>
        </div>
    </div>

    <div class="col-md-3 col-6 mb-3">
        <div class="card stat-card">
            <div class="stat-number">11</div>
            <div class="stat-label">示例文件</div>
        </div>
    </div>
</div>

<!-- 使用场景 -->
<div class="row mb-5">
    <div class="col-12">
        <h2 class="text-center mb-4">
            <i class="fas fa-bullseye me-2 text-primary"></i>
            适用场景
        </h2>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h4 class="card-title">
                    <i class="fas fa-graduation-cap me-2 text-primary"></i>
                    在线教育
                </h4>
                <p class="card-text">
                    为在线课程创建教学视频，支持MOOC平台、职业教育、技能培训等场景。
                    快速将课程大纲和教材转换为视频内容。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h4 class="card-title">
                    <i class="fas fa-code me-2 text-success"></i>
                    技术文档
                </h4>
                <p class="card-text">
                    将技术文档、API说明、教程转换为视频，让技术内容更生动，
                    提高开发者学习效率和理解深度。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h4 class="card-title">
                    <i class="fas fa-landmark me-2 text-warning"></i>
                    学术研究
                </h4>
                <p class="card-text">
                    制作学术讲座、研究报告、论文解读视频，
                    支持数学公式和专业图表，适合学术传播。
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h4 class="card-title">
                    <i class="fas fa-briefcase me-2 text-info"></i>
                    企业培训
                </h4>
                <p class="card-text">
                    创建企业内训视频、员工手册、操作指南，
                    降低培训成本，提高培训效果和一致性。
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 优势 -->
<div class="row mb-5">
    <div class="col-lg-8 mx-auto">
        <div class="card bg-light">
            <div class="card-body">
                <h3 class="card-title text-center mb-4">
                    <i class="fas fa-trophy me-2 text-warning"></i>
                    为什么选择我们
                </h3>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <h5><i class="fas fa-check-circle text-success me-2"></i>简单易用</h5>
                        <p class="text-muted mb-0">无需专业视频编辑技能，只需Markdown即可创建专业视频</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h5><i class="fas fa-check-circle text-success me-2"></i>高效快速</h5>
                        <p class="text-muted mb-0">自动化的生成流程，大幅缩短视频制作周期</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h5><i class="fas fa-check-circle text-success me-2"></i>质量保证</h5>
                        <p class="text-muted mb-0">经过充分测试，100%测试通过率，稳定可靠</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h5><i class="fas fa-check-circle text-success me-2"></i>完全免费</h5>
                        <p class="text-muted mb-0">开源项目，无使用限制，可自由定制和扩展</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 联系我们 -->
<div class="row">
    <div class="col-12">
        <div class="card bg-primary text-white text-center">
            <div class="card-body">
                <h3 class="card-title">
                    <i class="fas fa-comments me-2"></i>
                    联系我们
                </h3>
                <p class="card-text fs-5 mb-4">
                    我们期待听到您的意见和建议，帮助我们不断改进产品
                </p>
                <div class="d-flex justify-content-center gap-3 flex-wrap">
                    <a href="/" class="btn btn-light btn-lg">
                        <i class="fas fa-rocket me-2"></i>
                        立即使用
                    </a>
                    <a href="/examples" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-book me-2"></i>
                        查看示例
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 页面加载动画
document.addEventListener('DOMContentLoaded', function() {
    // 为数字添加计数动画
    const stats = document.querySelectorAll('.stat-number');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const el = entry.target;
                const target = parseInt(el.textContent);
                animateValue(el, 0, target, 2000);
                observer.unobserve(el);
            }
        });
    });

    stats.forEach(stat => observer.observe(stat));
});

/**
 * 数字动画
 */
function animateValue(element, start, end, duration) {
    const startTimestamp = performance.now();
    const step = (timestamp) => {
        const elapsed = timestamp - startTimestamp;
        const progress = Math.min(elapsed / duration, 1);
        const value = Math.floor(progress * (end - start) + start);
        element.textContent = value + (element.textContent.includes('%') ? '%' : '');
        if (progress < 1) {
            window.requestAnimationFrame(step);
        }
    };
    window.requestAnimationFrame(step);
}
</script>
{% endblock %}
